<template>
	<div class="padding-across-10" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
		<div>
			<div style="display: flex;float: left">
				<headerOpreate style="width: 300px;float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			</div>
			<div style="text-align: right;">
				<span style="font-size: 13px;font-weight: bold">状态</span>
				<el-select size="small" v-model="broadcastStatus" placeholder="请选择查询类型" style="width: 100px;" @change="selectStatus">
					<el-option label="全部" :value="0"></el-option>
					<el-option label="有效" :value="1"></el-option>
					<el-option label="已过期" :value="2"></el-option>
					<el-option label="运行中" :value="3"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">类型</span>
				<el-select size="small" v-model="selectBroadcastMode" placeholder="请选择查询类型" style="width: 130px;" @change="selectMode">
					<el-option label="全部" :value="0"></el-option>
					<el-option label="文件推送" :value="1"></el-option>
					<el-option label="实时广播" :value="2"></el-option>
					<el-option label="视频直播" :value="3"></el-option>
					<el-option label="网络资源广播" :value="4"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">关键字</span>
				<el-input style="width: 200px" size="small" v-model="nameFilter" placeholder="广播名称查询">
					<el-button slot="append" icon="search" @click="findBroadCast"></el-button>
				</el-input>
			</div>
		</div>
		<div style="padding-top: 3px;">
			<div class="block" style="text-align: right;float: right;padding-bottom: 2px">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<div style="width: 100%;">
			
		</div>
		<el-table border style="width: 100%" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="selection" width="55" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.name')" align="center" prop="title"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.creater')" align="center" prop="createdby"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="创建时间" align="center" prop="createdon"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="广播类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.broadcastmode === 1">文件推送</span>
					<span v-if="scope.row.broadcastmode === 2">实时广播</span>
					<span v-if="scope.row.broadcastmode === 3">视频直播</span>
					<span v-if="scope.row.broadcastmode === 4">网络资源广播</span>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="'运行状态'" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status === 2">运行中</el-tag>
					<el-tag type="warning" v-if="scope.row.status === 1">暂停</el-tag>
					<el-tag type="danger" v-if="scope.row.status === 0">停止</el-tag>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="设备状态" align="center">
				<template slot-scope="scope">
					<a style="font-size:13px;margin-top:3px;text-decoration:underline;cursor: pointer;color :#20A0FF" @click="deviceStatus(scope.row)">详情</a>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="是否有效" align="center">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.isvalid" type="success"><i class="el-icon-circle-check el-icon--left"></i>有效</el-tag>
					<el-tag v-else type="danger"><i class="el-icon-circle-cross el-icon--left"></i>已过期</el-tag>
				</template>
			</el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center" width="250px">
				<template slot-scope="scope">
					<el-button v-if="(scope.row.status === 1 || scope.row.status === 0) && scope.row.broadcastmode != 3" type="success" size="mini" @click="startBroadcast(scope.row)"><i class="fa fa-play"></i><br />开始</el-button>
					<el-button v-if="scope.row.status === 2 && scope.row.broadcastmode != 3" type="warning" size="mini" @click="pauseBroadcast(scope.row)"><i class="fa fa-pause"></i><br />暂停</el-button>
					<el-button v-if="scope.row.status === 2 && scope.row.broadcastmode != 3" type="danger" size="mini" @click="stopBroadcast(scope.row)"><i class="fa fa-stop"></i><br />停止</el-button>
					<el-button v-if="scope.row.broadcastmode != 3" type="primary" size="mini" @click="editBroadcast(scope.row)"><i class="el-icon-edit"></i><br />{{$t('message.edit')}}</el-button>
					<el-button v-if="scope.row.broadcastmode === 3" type="primary" size="mini" @click="previewLive(scope.row)"><i class="fa fa-eye"></i><br />预览</el-button>
					<el-button v-if="scope.row.broadcastmode === 2 || scope.row.broadcastmode === 4" type="primary" size="mini" @click="previewBroadcast(scope.row)"><i class="fa fa-eye"></i><br />预览</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<!-- 设备状态详情 -->
		<el-dialog title="设备运行状态" v-model="deviceStatusDialog" :class="[dialog-small-width]">
			<el-table border style="width: 100%;" :data="deviceStatusDatas">
				<el-table-column :show-overflow-tooltip="true" label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="运行状态" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status === 2">运行</el-tag>
						<el-tag type="warning" v-if="scope.row.status === 1">暂停</el-tag>
						<el-tag type="danger" v-if="scope.row.status === 0">停止</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 控制返回结果状态详情 -->
		<el-dialog title="设备控制反馈" v-model="deviceControlDialog" :class="[dialog-small-width]">
			<el-table border style="width: 100%;" :data="controlResultDatas">
				<el-table-column :show-overflow-tooltip="true" label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="控制结果" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.code === 0">成功</el-tag>
						<el-tag type="danger" v-else>失败</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<el-dialog :title="liveTitle" :visible.sync="showMP4" @close="closeMP4">
			<div id="preview-content">
				<div class="content-top">
					<div class="top-left">
						<!--视频预览弹窗-->
						<video class="vjs-default-skin" id="myVideo" autoplay="autoplay" loop="loop" width="100%" controls :src="MP4Path" :poster="loadingUrl">
							当前浏览器暂不支持该插件
						</video>
					</div>
					<div class="top-right">
						<el-table :data="mediaList">
							<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
							<el-table-column :show-overflow-tooltip="true" label="播放列表" align="center">
								<template slot-scope="scope">
									<div style="cursor: pointer;" @click="selectMP4(scope.row, $event)" :style="IsSelect === scope.row.name?'color: green;':''">{{scope.row.name}}</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog :title="liveTitle" :visible.sync="showMP3" :class="[dialog-small-width]" @close="closeMP3">
			<div id="MP3-content">
				<div class="content-top">
					<div class="top-left">
						<div class="left-img">
							<img id="diskImg" class="Rotation" width="80%" src="../../../../assets/images/player/disk.png" alt="" />
							<!--<img width="25%" src="../../../../assets/images/player/ploe.png" alt="" />-->
						</div>
						<audio id="myAudio" class="audio-box" :src="MP3Path" controls autoplay="autoplay" loop="loop">
							当前浏览器暂不支持该插件
						</audio>
					</div>
					<div class="top-right">
						<el-table :data="mediaList" height="100%">
							<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
							<el-table-column :show-overflow-tooltip="true" label="播放列表" align="center">
								<template slot-scope="scope">
									<div style="cursor: pointer;" @click="selectMP3(scope.row, $event)" :style="IsSelect === scope.row.name?'color: green;':''">{{scope.row.name}}</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog :title="liveTitle" :visible.sync="showLive" :class="[dialog-small-width]" @close="closeLive">
			<!-- <template>
				<video-player class="vjs-custom-skin" ref="videoPlayer" :options="videoOptions" :playsinline="true" customEventName="customstatechangedeventname"></video-player>
			</template> -->
			<div id="record"></div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import loading from "../../../../assets/images/loading2.gif"

	import swf from '../../../../assets/js/swfobject.js'

	import { videoPlayer } from 'vue-video-player'
	require('videojs-flash/dist/videojs-flash')
	require('video.js/dist/video-js.css')
	require('vue-video-player/src/custom-theme.css')

	export default {
		components: {
			headerOpreate,
			videoPlayer
		},
		data() {
			return {
				//				广播筛选
				broadcastStatus: 0,
				nameFilter: '',
				selectBroadcastMode: 0,
				loadingUrl: loading,
				model: 0,
				controlResultDatas: [],
				deviceControlDialog: false,
				tcDeviceDatas: [],
				deviceStatusDatas: [],
				deviceStatusDialog: false,
				loading: false,
				isReload: false,
				datas: [],
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				showLive: false,
				liveTitle: '预览广播',
				showMP3: false,
				showMP4: false,
				mediaPath: '',
				MP4Path: '',
				MP3Path: '',
				videoOptions: {},
				mediaList: [],
				IsSelect: '',
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					show: true,
					type: "primary",
					size: "small",
					icon: "el-icon-plus",
					name: this.$t('message.add'),
					action: "addBroadcast"
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					type: "primary",
					size: "small",
					icon: "el-icon-eleg-social_instagram",
					name: '视频直播',
					action: "goLive"
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					type: "danger",
					size: "small",
					icon: "el-icon-delete2",
					name: this.$t('message.delete'),
					action: "deleteMultiple"
				},
				],
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		mounted() {
			//			console.log('this is current videojs instance object', this.myVideoPlayer)
		},
		computed: {
			player() {
				return this.$refs.videoPlayer.player
			}
		},
		methods: {
			closeLive() {
				this.videoOptions = {};
			},
			closeMP4() {
				myVideo.pause();
			},
			closeMP3() {
				clearInterval(this.playStatus);
				myAudio.pause();
			},
			selectMP3(row, e) {
				this.MP3Path = row.url;
				this.IsSelect = row.name;
			},
			selectMP4(row, e) {
				this.MP4Path = row.url;
				this.IsSelect = row.name;
			},
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				this.$emit('backPrev');
			},
			addBroadcast() {
				this.$emit('changeView', "Add", {});
			},
			editBroadcast(row) {
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				row.broadcastStatus = this.broadcastStatus;
				row.selectBroadcastMode = this.selectBroadcastMode;
				row.nameFilter = this.nameFilter;
				this.$emit('changeView', "Edit", row);
			},
			goLive() {
				this.$emit('changeView', 'Live', {})
			},
			//查看设备运行状态
			deviceStatus(row) {
				this.deviceStatusDatas = row.devicestatus;
				this.deviceStatusDialog = true;
			},
			getResultDatas(obj) {
				if(this.model === 2) {
					if(obj.Code === 0) {
						this.$notify({
							title: '成功',
							message: this.$t('message.operationSuccess'),
							type: 'success',
							duration: 2500
						});
						this.getDatas();
					} else {
						this.$notify.error({
							title: '错误',
							message: this.$t('message.operationFailed'),
							duration: 2500
						});
					}
				}
				if(this.model === 4 || this.model === 1) {
					if(obj.code === 0) {
						if(obj.response.length === 0) {
							this.$notify.error({
								title: '错误',
								message: '无响应',
								duration: 2500
							});
						} else {
							this.controlResultDatas = obj.response;
							this.deviceControlDialog = true;
							this.getDatas();
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: obj.msg,
							duration: 2500
						});
					}
				}
			},
			//观看直播
			previewLive(row) {
				this.liveTitle = '预览广播';
				HttpServer.httpGet.call(this, '/Api/Broadcasts/GetResource?keyId=' + row.scheduleId, function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(response.data.resources.length > 0) {
							this.liveTitle = this.liveTitle + '	流地址：' + response.data.resources[0].url.split('/')[response.data.resources[0].url.split('/').length - 1];
							this.showLive = true;
							// this.videoOptions = {
							// 	techOrder: ['flash'], // 兼容顺序
							// 	muted: true,
							// 	sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
							// 		type: "rtmp/mp4",
							// 		src: response.data.resources[0].url
							// 	}],
							// 	language: 'zh-CN',
							// 	controls: true,
							// 	autoplay: true
							// }
							//Grind player
							this.$nextTick(function(){
								var flashvars = {
									src: response.data.resources[0].url,
									language: 'zh-CN'
								};
								var params = {
									allowFullScreen: true,
									allowScriptAccess: "always",
									bgcolor: "#000000",
									autoPlay: true ,
									quality: 'high',
								};
								var attrs = {
									name: "record"
								};
								swf.swfobject.embedSWF(localHost + "/Images/GrindPlayer.swf", "record","100%", "380", "10.2", null, flashvars, params, attrs);
							})
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: '暂无播放资源',
								type: 'warning',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//预览视频音频
			previewBroadcast(row) {
				console.log(row)
				this.liveTitle = '预览广播';
				HttpServer.httpGet.call(this, '/Api/Broadcasts/GetResource?keyId=' + row.scheduleId, function(response) {}, function(response) {
					//					console.log('播放列表返回', response);
					if(response.data.code === 0) {
						if(response.data.resources.length > 0) {
							if(response.data.url && response.data.url != ''){
								this.liveTitle = this.liveTitle + '	流地址：' + response.data.url.split('/')[response.data.url.split('/').length - 1]
							}
							this.mediaList = response.data.resources;
							this.showPreview = true;
							row.op === 2 ? this.showMP3 = true : this.showMP4 = true;
							if(this.showMP3 === true) {
								this.MP3Path = this.mediaList[0].url;
								this.IsSelect = this.mediaList[0].name;
								this.playStatus = setInterval(() => {
									var status = document.getElementById('myAudio');
									if(status.paused) {
										$('#diskImg').removeClass('Rotation');
									} else {
										$('#diskImg').addClass('Rotation');
									}
								}, 300);
							} else if(this.showMP4 === true) {
								this.MP4Path = this.mediaList[0].url;
								this.IsSelect = this.mediaList[0].name;
							}
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: '暂无播放资源',
								type: 'warning',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//开始
			startBroadcast(row) {
				this.$confirm('此操作将开始' + row.title + '的广播任务，是否继续？', this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					this.loading = true;
					this.model = row.broadcastmode;
					var sns = [];
					var op = 1;
					if(row.broadcastmode === 1 && row.status === 1){
						op = 6;
					}
					row.devicestatus.forEach(function(item) {
						sns.push(item.sn)
					})
					//					let vm = this;
					this.$nextTick(function() {
						HttpServer.httpPost.call(this, '/Api/Broadcasts/Operation', {
							gid: row.gid,
							op: op,
							sns: sns,
							islive: row.islive,
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							this.getResultDatas(response.data);
							this.loading = false;
						});
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			//暂停
			pauseBroadcast(row) {
				this.$confirm('此操作将暂停' + row.title + '的广播任务，是否继续？', this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					this.loading = true;
					this.model = row.broadcastmode;
					var sns = [];
					row.devicestatus.forEach(function(item) {
						sns.push(item.sn)
					})
					this.$nextTick(function() {
						HttpServer.httpPost.call(this, '/Api/Broadcasts/Operation', {
							gid: row.gid,
							op: 2,
							sns: sns,
							islive: row.islive,
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							this.getResultDatas(response.data);
							this.loading = false;
						});
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			//停止
			stopBroadcast(row) {
				this.$confirm('此操作将停止' + row.title + '的广播任务，是否继续？', this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					this.loading = true;
					this.model = row.broadcastmode;
					var sns = [];
					row.devicestatus.forEach(function(item) {
						sns.push(item.sn)
					})
					this.$nextTick(function() {
						HttpServer.httpPost.call(this, '/Api/Broadcasts/Operation', {
							gid: row.gid,
							op: 0,
							sns: sns,
							islive: row.islive,
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							this.getResultDatas(response.data);
							this.loading = false;
						});
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			//批量删除
			deleteMultiple() {
				if(this.formateSelection().length > 0) {
					this.$confirm(this.$t('message.bulkDeleteWarning'), this.$t('message.warning'), {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						this.loading = true;
						//批量删除成功处理
						HttpServer.httpPost.call(this, '/Api/Broadcasts/Delete', {
							ids: this.formateSelection(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						//取消批量删除处理
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].scheduleId);
				}
				return result;
			},
			//去掉时间中的T
			formateLocationData(array) {
				for(var i = 0; i < array.length; i++) {
					var index1 = array[i].createdon.indexOf("T");
					array[i].createdon = array[i].createdon.substring(0, index1) + " " + array[i].createdon.substring(index1 + 1, index1 + 9);
				}
			},
			//广播状态筛选
			selectStatus() {
				this.getDatas();
			},
			//广播类型筛选
			selectMode(){
				this.getDatas();
			},
			findBroadCast() {
				this.getDatas();
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Broadcasts?page=' + this.currentPage +
					'&size=' + this.pageSize +
					'&IsValid=' + this.broadcastStatus +
					'&BroadcastMode=' + this.selectBroadcastMode +
					'&filter=' + this.nameFilter +
					'&UserLoginName=' + GloabFun.getUid() +
					'&Token=' + GloabFun.getToken() +
					'&UserKeyId=' + parseInt(GloabFun.getKeyId()),
					function(response) {},
					function(response) {
						this.loading = false;
						if(response.data.code === 0) {
							this.formateLocationData(response.data.data)
							this.tableData = response.data.data;
							this.totalSize = response.data.total;
							if(this.isReload) {
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.isReload = false;
					});
			}
		},
		created() {
			if(this.templateObj.title) {
				this.currentPage = this.templateObj.currentPage;
				this.pageSize = this.templateObj.pageSize;
				this.broadcastStatus = this.templateObj.broadcastStatus;
				this.selectBroadcastMode = this.templateObj.selectBroadcastMode;
				this.nameFilter = this.templateObj.nameFilter;
			}
			this.getDatas();
		}
	}
</script>
<style scoped lang="less">
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
	/*.video-js .vjs-tech{
		height: 100%;
		width: 100%;
	}*/
	
	#preview-content {
		width: 100%;
		height: 400px;
		.content-top {
			width: 100%;
			height: 92%;
			background-color: #e7e7e7;
			display: flex;
			.top-left {
				width: 70%;
				height: 100%;
				display: flex;
				#myVideo {
					background-color: black;
				}
				.left-img {
					width: 100%;
					height: 90%;
					position: relative;
					>img {
						position: absolute;
						top: 30px;
						left: 30px;
					}
					/*.pole {
						width: 10px;
						height: 50px;
						background-size: 50% 50%;
						background-image: url(../../../../assets/images/player/ploe.png);
					}*/
				}
				.audio-box {
					width: 100%;
					height: 10%;
				}
			}
			.top-right {
				width: 30%;
				height: 100%;
				.el-table {
					height: 100%;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
		}
	}
	
	#MP3-content {
		width: 100%;
		height: 400px;
		.content-top {
			width: 100%;
			height: 92%;
			background-color: #e7e7e7;
			display: flex;
			.top-left {
				width: 50%;
				height: 100%;
				.left-img {
					width: 100%;
					height: 90%;
					position: relative;
					/*旋转*/
					@-webkit-keyframes rotation {
						from {
							-webkit-transform: rotate(0deg);
						}
						to {
							-webkit-transform: rotate(360deg);
						}
					}
					@-moz-keyframes rotation {
						from {
							-webkit-transform: rotate(0deg);
						}
						to {
							-webkit-transform: rotate(360deg);
						}
					}
					@-ms-keyframes rotation {
						from {
							-webkit-transform: rotate(0deg);
						}
						to {
							-webkit-transform: rotate(360deg);
						}
					}
					@keyframes rotation {
						from {
							-webkit-transform: rotate(0deg);
						}
						to {
							-webkit-transform: rotate(360deg);
						}
					}
					.Rotation {
						-webkit-transform: rotate(360deg);
						animation: rotation 6s linear infinite;
						-moz-animation: rotation 6s linear infinite;
						-webkit-animation: rotation 6s linear infinite;
						-o-animation: rotation 6s linear infinite;
					}
					>img {
						position: absolute;
						top: 30px;
						left: 30px;
					}
					.pole {
						width: 10px;
						height: 50px;
						background-size: 50% 50%;
						background-image: url(../../../../assets/images/player/ploe.png);
					}
				}
				.audio-box {
					width: 100%;
					height: 10%;
				}
			}
			.top-right {
				width: 50%;
				height: 100%;
				.el-table {
					height: 100%;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
				}
			}
		}
	}
</style>